/*
### 练习2：扩展物料卡片组件

**要求：**

1. 为物料卡片添加图片显示
2. 添加供应商信息
3. 实现库存预警（库存<10时显示警告）
4. 添加收藏功能

// 物料卡片组件
interface MaterialCardProps {
    id: number;
    name: string;
    code: string;
    price: number;
    stock: number;
    category?: string;
    onEdit?: (id: number) => void;
    onDelete?: (id: number) => void;
}

const MaterialCard: React.FC<MaterialCardProps> = ({
    id,
    name,
    code,
    price,
    stock,
    category = '未分类',
    onEdit,
    onDelete
}) => {
    // 库存状态判断
    const getStockStatus = (stock: number) => {
        if (stock === 0) return { text: '缺货', className: 'out-of-stock' };
        if (stock < 10) return { text: '库存不足', className: 'low-stock' };
        return { text: '库存充足', className: 'sufficient-stock' };
    };

    const stockStatus = getStockStatus(stock);

    return (
        <div className="material-card">
            <div className="card-header">
                <h3 className="material-name">{name}</h3>
                <span className="material-code">{code}</span>
            </div>
            
            <div className="card-body">
                <div className="info-row">
                    <span className="label">价格:</span>
                    <span className="price">¥{price.toFixed(2)}</span>
                </div>
                
                <div className="info-row">
                    <span className="label">库存:</span>
                    <span className={`stock ${stockStatus.className}`}>
                        {stock} ({stockStatus.text})
                    </span>
                </div>
                
                <div className="info-row">
                    <span className="label">分类:</span>
                    <span className="category">{category}</span>
                </div>
            </div>
            
            <div className="card-actions">
                <button 
                    className="btn-edit" 
                    onClick={() => onEdit?.(id)}
                >
                    编辑
                </button>
                <button 
                    className="btn-delete" 
                    onClick={() => onDelete?.(id)}
                >
                    删除
                </button>
            </div>
        </div>
    );
};

export default MaterialCard;
*/